<template>
  <div>
    <Main :type="'form'">
      <el-form ref="form" label-width="150px" :model="form" :rules="form">
        <el-form-item label="选择即时物流商" prop="name">
          <div>
            <el-checkbox v-model="form.is_default">请先勾选并同意</el-checkbox>
            <el-button type="text">《物流配送服务协议》</el-button>
          </div>
          <div v-for="(item, index) in listData" :key="index" class="child-th">
            <div
              class="imgs"
              :style="
                item.express_config === '' ? 'border: 1px solid #e8e7ea;' : ''
              "
            >
              <img
                v-if="item.express_config !== ''"
                :src="$store.state.qiniu + item.img"
              />
              <img v-else :src="$store.state.qiniu + item.img_no" />
            </div>
            <el-checkbox v-model="item.status">选择该物流</el-checkbox>
          </div>
        </el-form-item>
        <div style="height: 40px;">
          请根据合作快递商提供内容填写以下内容（如有疑问，请联系技术指导）
        </div>
        <el-form-item
          label="MD5"
          prop="val1"
          :rules="{ required: true, message: '请输入MD5', trigger: 'blur' }"
        >
          <el-input
            v-model="form.val1"
            class="form-input"
            placeholder="请输入MD5"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="Token"
          prop="val2"
          :rules="{ required: true, message: '请输入Token', trigger: 'blur' }"
        >
          <el-input
            v-model="form.val2"
            class="form-input"
            placeholder="请输入Token"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="商户编号"
          prop="val3"
          :rules="{
            required: true,
            message: '请输入商户编号',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="form.val3"
            class="form-input"
            placeholder="请输入商户编号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商户ID"
          prop="val4"
          :rules="{
            required: true,
            message: '请输入商户ID',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="form.val4"
            class="form-input"
            placeholder="请输入商户ID"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="注册手机号"
          prop="val5"
          :rules="{
            required: true,
            message: '请输入注册手机号',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="form.val5"
            class="form-input"
            :maxlength="11"
            onkeyup='value=value.replace(/\D/g,"")'
            onpaste='value=value.replace(/\D/g,"")'
            oncontextmenu='value=value.replace(/\D/g,"")'
            placeholder="请输入注册手机号"
            @change="inputTagPhone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="!form.is_default"
            @click="urlsTag"
            >生成对应链接</el-button
          >
        </el-form-item>
      </el-form>
    </Main>
    <Footer>
      <el-button type="primary" :disabled="!form.is_default" @click="submit"
        >保 存</el-button
      >
    </Footer>
    <el-dialog
      title="请将以下链接复制填写到第三方物流网站"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item>
          <el-input ref="urls" v-model="url" style="width:80%;"></el-input>
          &nbsp;&nbsp;&nbsp;
          <el-button type="text" @click="copy">复制</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { THIRDLOGISTICS } from "../../service";
export default {
  data() {
    return {
      form: {
        val1: "",
        val2: "",
        val3: "",
        val4: "",
        val5: "",
        is_default: false
      },
      dialogFormVisible: false,
      url: "http://api.ztwlxx.cn/pyapi/shansong_callback",
      listData: [],
      valArr: []
    };
  },
  created() {
    this.get();
  },
  methods: {
    inputTagPhone(e) {
      this.form.val5 = e;
    },

    async submit() {
      let json = [
        {
          express_id: this.listData[0].express_id,
          MD5: this.form.val1,
          Token: this.form.val2,
          mch_code: this.form.val3,
          mch_id: this.form.val4,
          phone: this.form.val5,
          status: this.listData[0].status ? 1 : 0
        }
      ];
      await this.$refs["form"].validate(valid => {
        if (valid) {
          THIRDLOGISTICS({
            flag: "save",
            json: JSON.stringify(json)
          }).then(({ code, msg }) => {
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    },
    async get() {
      await THIRDLOGISTICS().then(({ code, data, msg }) => {
        if (code === 200) {
          this.listData = this.handle(data);
        } else {
          this.$message.error(msg);
        }
      });
    },
    handle(data) {
      let arr = [];
      data.forEach(ele => {
        this.form.is_default = !!ele.express_config;
        let json = {
          express_id: ele.express_id,
          img: ele.img,
          img_no: ele.img_no,
          name: ele.name,
          status: false,
          express_config: ""
        };
        if (ele.express_config) {
          json.status = ele.express_config.status === 1;
          json.express_config = JSON.parse(ele.express_config.content);
        }
        arr.push(json);
      });
      if (arr[0].express_config) {
        let ars = arr[0].express_config;
        this.form.val1 = ars.MD5;
        this.form.val2 = ars.Token;
        this.form.val3 = ars.mch_code;
        this.form.val4 = ars.mch_id;
        this.form.val5 = ars.phone;
      }
      return arr;
    },
    urlsTag() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.dialogFormVisible = true;
        }
      });
    },
    copy() {
      this.$refs.urls.select();
      document.execCommand("copy");
    }
  }
};
</script>
<style lang="scss" scoped>
.child-th {
  float: left;
  width: 140px;
  height: 94px;
  .imgs {
    width: 120px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
